<script>
import { chat } from '@/chat'
import { useAppStore } from '@/stores/app'
import { mapStores } from 'pinia'
import { ImagePreview, List } from 'vant'
import { nextTick } from 'vue'
import ChatBubble from './ChatBubble.vue'
import RedEnvelope from './RedEnvelope.vue'

export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    List,
    ChatBubble,
    RedEnvelope
  },
  computed: {
    ...mapStores(useAppStore),
    history() {
      return chat.history.value[this.$route.params.username] ?? []
    },
    images() {
      return this.history.filter(item => item.content_type === 'image').map(item => item.msg)
    },
    isGroup() {
      return this.$route.params.username?.startsWith('@TGS$')
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      page: 0
    }
  },
  methods: {
    async onLoad() {
      const isFirst = chat.history.value[this.$route.params.username].length === 0
      this.finished = await chat.loadHistory({
        username: this.$route.params.username,
        page: this.page++,
        isGroup: this.isGroup
      })
      this.loading = false
      chat.setRead(this.$route.params.username)
      isFirst && this.scrollToBottom()
    },
    async scrollToBottom() {
      await nextTick()
      const { $el } = this.$refs.contentRef
      $el.scrollTo(0, $el.scrollHeight)
    },
    previewImages(path) {
      const position = this.images.findIndex(item => item === path)
      ImagePreview({
        images: this.images,
        startPosition: position
      })
    },
  },
}
</script>

<template>
  <List v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" direction="up" ref="contentRef" @touchstart.native="$emit('touched')">
    <div class="chat-content">
      <div
        v-for="item in history"
        :key="item.id"
        class="chat-item"
        :style="{
          flexDirection: item.from === appStore.userInfo.username ? 'row-reverse' : 'row',
          alignItems: isGroup ? 'start' : 'center',
          gap: isGroup ? '10px' : '20px',
        }"
      >
        <div class="chat-avatar">
          <img v-if="item.avatar_url" :src="item.avatar_url">
        </div>
        <div
          style="display: flex; flex-direction: column; gap: 5px; padding-top: 5px;"
          :style="{
            justifyContent: isGroup ? 'flex-end' : 'flex-start',
            textAlign: item.from === appStore.userInfo.username ? 'right' : 'left',
          }"
        >
        <div v-if="isGroup" style="color: #999; font-size: 12px;">
            <!-- 群聊昵称 -->
            <span>{{ item.nick_name }}</span>
            <!-- 群聊用户名 -->
            <!-- <span style="margin-left: 5px;">[{{ item.from }}]</span> -->
          </div>
          <div style="color: #999; font-size: 12px;"></div>
          <RedEnvelope
            v-if="item.content_type === 'red-envelope'"
            :direction="item.from === appStore.userInfo.username ? 'right' : 'left'"
            :avatar="item.avatar_url"
            :nickname="item.nick_name"
            :amount="Number(item.msg)"
            :fingerPrint="item.fingerPrint"
            :is-group="isGroup"
            :disabled="item.from === appStore.userInfo.username"
          />
          <ChatBubble
            v-else
            :direction="item.from === appStore.userInfo.username ? 'right' : 'left'"
            :type="item.content_type ?? 'text'"
            :content="item.msg"
            :is-group="isGroup"
            @preview="previewImages"
          />
        </div>
      </div>
    </div>
  </List>
</template>

<style lang="less" scoped>
.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;

  .chat-item {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    >img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
